// 获取商品总页数
// 获取商品列表元素
const goodsBox = $('.goods_list')
const filterBox = $('.filterBox')
const searchButton = $('.search_box > button')

// 当前页码
let current = 1

// 准备一个对象, 接收列表查询参数
const searchInfo = {
  current,
  pageSize: 12,
  cate: '全部',
  word: '',
  sortType: 'id',
  sortMethod: 'ASC' 
}

// 获取
getGoodsList()
async function getGoodsList() {
  const result = await $.post({
    url: '/goods/list',
    method: 'POST',
    data: searchInfo
  })

  if (result.code === 1) {
    renderHTML(goodsBox, result.data)
  }
  
  const info = {
    // 文本信息
    text: { first: '<<', prev: '上一页', next: '下一页', last: '>>', go: '跳转' },
    // 分页信息
    pagi: { current: result.current, totalPage: result.total },
    // 样式信息
    styles: { btnColor: 'orange' },
    // 回调函数(当各种点击事件发生以后, 当前页切换了, 需要触发的回调函数)
    async change (current) {
      searchInfo.current = current
      const res = await $.post({ 
        url: `/goods/list`,
        method: 'POST',
        data: searchInfo
      })
      if (res.code === 1) {
        renderHTML(goodsBox, res.data)
      }
    }
  }
  new Pagination('#pagination', info)
}

// 渲染商品列表
function renderHTML(selector, data) {
  const goodsStr = data.reduce((prev, item) => {
    return prev + `
      <li data-link=${ item.link }>
        <div class="show">
          <img src="${ item.img }" alt="">
        </div>
        <div class="info">
          <p class="desc">${ item.title }</p>
          <p class="price">
            <span class="current">￥${ item.price }</span>
          </p>
          <p class="btns">
            <button class="add" data-id=${ item._id }>加入购物车</button>
            <button class="buy">立即购买</button>
          </p>
        </div>
      </li>
    `
  }, '')
  selector.html(goodsStr)
}

// 商品点击事件
goodsBox.on('click', async e => {
  t = e.target
  if (t.nodeName === 'LI') {
    window.open(t.dataset.link)
  }

  // 加入购物车
  console.log(t.className)
  if (t.className === 'add') {
    const goodsId = t.dataset.id
    const res = await $.ajax({
      url: '/cart/add',
      method: 'POST',
      data: { goodsId }
    })

    if (res.code === 1) alert(res.message)
    if (res.code === 6) {
      if (confirm('您未登录, 即将跳转至登陆页面 ^_^')) {
        window.location.href = '/pages/login'
      }
    }
  }

  // 立即购买
  if (t.className === 'buy') alert('购买成功, 你太有钱了')

})


filterBox.on('click', e => {
  t = e.target

  // 点击分类
  if (t.className === 'cate') {
    // 排他
    ;[ ...t.parentElement.children ].forEach(item => item.classList.remove('active'))
    t.classList.add('active')
    // 获取当前按钮内容, 重新渲染页面
    searchInfo.cate = t.dataset.cate
    // 获取第一页
    searchInfo.current = 1
    getGoodsList()
  }

  // 点击排序
  if (t.className === 'sort') {
    // 排他
    ;[ ...t.parentElement.children ].forEach(item => item.classList.remove('active'))
    t.classList.add('active')
    // 获取当前按钮内容, 重新渲染页面
    searchInfo.sortType = t.dataset.method
    searchInfo.sortMethod = t.dataset.type
    // 获取第一页
    searchInfo.current = 1
    getGoodsList()
  }

  // 搜索框搜索商品
  if (t.nodeName === 'BUTTON') {
    searchInfo.word = $('.search_inp').val()
    searchInfo.current = 1
    getGoodsList()
  }
})
